<template>
	<view class="content">
		<!-- 登录表单 -->
		<view class="login-form">
			<view class="title-view">
				<text>凌瑞商贸</text>
				<text>Welcome back</text>
			</view>
			<view class="form-item">
				<text class="item-text">账号</text>
				<view class="item-input">
					<up-input border="none" v-model="loginForm.username" type="text" />
				</view>
			</view>
			<view class="form-item" style="margin-top: 60rpx;">
				<text class="item-text">密码</text>
				<view class="item-input">
					<up-input border="none" :clearable="false" v-model="loginForm.password"
						type="password" />
				</view>
			</view>
			<view style="height:120rpx"></view>
			<up-button @click="handleLogin" text="登录" shape="circle"
				:custom-style="{backgroundColor:'#74C3FB',color:'#fff'}">
			</up-button>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive, computed } from 'vue'
	import { onLoad, onReady } from "@dcloudio/uni-app"
	import { useStore } from "vuex";
	const store = useStore();
	const app = getApp()

	// 数据
	const codeUrl = ref("")
	const captchaEnabled = ref(false) // 使用验证码
	const register = ref(false) // 用户注册开关
	const loginForm = ref({
		username: "", //admin
		password: "", //rootC2013
		code: "",
		uuid: ""
	})

	onLoad((options) => {
		if (store.state.user.token) {
			uni.reLaunch({
				url: '/pages/work'
			})
		}
	});

	// 登录方法
	const handleLogin = () => {
		if (loginForm.value.username === "") {
			app.globalData.modal.msgError("请输入账号")
		} else if (loginForm.value.password === "") {
			app.globalData.modal.msgError("请输入密码")
		} else if (loginForm.value.code === "" && captchaEnabled.value) {
			app.globalData.modal.msgError("请输入验证码")
		} else {
			store.dispatch("Login", loginForm.value).then(() => {
				loginSuccess()
			})
		}
	}

	// 登录成功后，处理函数
	const loginSuccess = () => {
		// 设置用户信息
		store.dispatch('GetInfo').then(res => {
			uni.reLaunch({
				url: '/pages/work'
			})
		})
	}
</script>

<style lang="scss" scoped>
	.content {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background: url('@/static/login.jpg');
		background-size: cover;

		.login-form {
			width: 80%;
			//background: #ffffff;
			margin-top: 150rpx;

			.title-view {
				font-size: 28px;
				color: #fff;
				letter-spacing: 2px;
				position: absolute;
				top: 10%;
				display: flex;
				flex-direction: column;
			}

			.form-item {
				width: 100%;
				display: flex;
				align-items: center;

				.item-text {
					color: #AAAAAA;
				}

				.item-input {
					flex:1;
					margin-left: 10rpx;
					border-bottom: 2rpx solid #dedede;
				}
			}
		}
	}
</style>